<template>
	<view class="container">
		<view class="tui-bg"></view>
		<view class="tui-content">
			<view class="tui-form">
				<view class="tui-icon">
				  <canvas :style="{ width: qrcodeSize + 'px', height: qrcodeSize + 'px' }" canvas-id="memberCode"></canvas>
				</view>
				<view class="tui-title">请将 二维码 展示给店员完成付款</view>
			</view>
		</view>
		<view class="tui-tips">
			<view class="tui-grey">温馨提示:</view>
			<view class="tui-light-grey">
				请当面和店员确认完成付款，奇宠日记不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成钱款损失！谨防电话诈骗！
			</view>
		</view>
	</view>
</template>

<script>
	const qrCode = require('@/libs/weapp-qrcode.js');
	export default {
		data() {
			return {
				qrcodeSize: uni.upx2px(260),
			}
		},
		onLoad: function(options) {
			var that = this;
			//扫码携带参数处理
			// // #ifdef MP
			// if (options.scene) {
			// 	var value = util.getUrlParams(decodeURIComponent(options.scene));
			// 	if (typeof value === 'object') {
			// 		if (value.id) options.id = value.id;
			// 		if (value.bargain) options.bargain = value.bargain;
			// 		//记录推广人uid
			// 		if (value.pid) app.globalData.spid = value.pid;
			// 	} else {
			// 		app.globalData.spid = value;
			// 	}
			// }
			//记录推广人uid
			// if (options.spid) app.globalData.spid = options.spid;
			// // #endif
			// if (options.hasOwnProperty('id')) {
			// 	that.id = options.id;
			// 	that.bargainUid = options.bargain || 0;
			// }
			
			// 订单类型
			// 0 礼品卡 1 会员卡 2 充值 3 门票 4 百货 5 服务
			
			//             二维码核验
			
			// 0 会员码， 1 门票， 2 会员卡， 3 优惠卷  4 礼品卡  5 充值  6 百货  7 服务
			////0 购卡/门票 1 会员卡使用 2 优惠劵
			let params = {
			  id: options.id,
			  orderType: options.orderType,
			  type: options.type
			}
			that.makeMemberCode(JSON.stringify(params))
		},
		methods: {
			makeMemberCode(text) {
			  new qrCode('memberCode', {
			    text: text,
			    width: this.qrcodeSize,
			    height: this.qrcodeSize,
			    colorDark: '#333333',
			    colorLight: '#FFFFFF',
			    correctLevel: qrCode.CorrectLevel.H
			  });
			}
		}
	}
</script>

<style>
	.tui-bg {
		width: 100%;
		height: 260rpx;
		background: linear-gradient(20deg, #FFE380, #FDD338);
		border-bottom-left-radius: 42rpx;
	}

	.tui-content {
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.tui-form {
		background: #fff;
		height: 500rpx;
		box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.08);
		border-radius: 10rpx;
		margin-top: -160rpx;
		position: relative;
		z-index: 10;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.tui-icon {
		
		display: flex;
		flex-direction: column;
		align-items: center;
		
		margin-top: 60rpx;
	}

	.tui-title {
		color: #666666;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-top: 36rpx;
	}

	.tui-tips {
		font-size: 26rpx;
		padding: 48rpx 90rpx;
		box-sizing: border-box;
		text-align: justify;
		line-height: 48rpx;
	}

	.tui-grey {
		color: #555;
		padding-bottom: 8rpx;
	}

	.tui-light-grey {
		color: #888;
		line-height: 40rpx;
	}
</style>
